import React ,{Component}from 'react';
import { AdminRoutes } from "./routes"
import { Switch , Route ,Redirect} from 'react-router-dom'
import Admin from "./components/Admin"
import NoAuth from "./views/NoAuth/index.js"
import { connect } from 'react-redux'

class App extends Component{
	render(){
		return (
			<div className="App">
			  <Admin 
				avatar={this.props.avatar}
				userName={this.props.userName}
				>
				<Switch>
					<Route path="/admin/noauth" component={NoAuth}/>
				  {
					AdminRoutes.map(el=>{
					  return (
						<Route
						  key={el.path}
						  path={ "/admin" + el.path }
						  render={ (routerProps)=>{
							  // 判断有无权限
							 
							  let roles = el.roles;
							  let auth = roles.some(el=>el===this.props.role);
							  console.log(auth);
							  return (
								auth?
								<el.component {...routerProps} />
								:
								<Redirect to="/admin/noauth"/>
							  )
						  } }
						/>
					  )
					})
				  }
				   <Redirect to="/admin/dashBoard" from="/admin" exact/>
				  <Redirect to="/404"/>
				</Switch>
			  </Admin>
			</div>
		  );
	}
}

const mapStateToProps = (state)=>{
	return {
		avatar:state.userReducer.avatar,
		userName:state.userReducer.userName,
		role:state.userReducer.role
	}
}
export default connect(mapStateToProps)(App);
